import React from 'react';
import {NavBar,Icon,Flex, WhiteSpace, WingBlank,InputItem, Card, Button, Toast} from 'antd-mobile';
import ReactDOM from 'react-dom'
import './index.less';
import axios from '../../axios/index'
import Utils from '../../utils/index'
export default class Recharge extends React.Component{
    state={
        arr:[],
        hasError: false,
        phone: '',
        ifClick:false
    }
    constructor(props){
        super(props);
    }
    componentDidMount(){
        axios.ajax({
            url:'/api/v1/customer_service/tps/rechargePackages',
            method:'get',
            data:{}
        }).then((res)=>{
            if(res){
                console.log('充值套餐列表:',res.data);
                res.data.map(((item, index)=> {

                   Object.assign(item,{selected:0})
               }))
               console.log('充值套餐列表:',res.data);
                this.setState({
                    arr:res.data
                });
            }
        });
    }
    onErrorClick = () => {
        if (this.state.hasError) {
          Toast.info('请输入正确的手机号');
        }
      }
    onChange = (value) => {
        let value2=value.replace(/\s/g, '');
        if (!Utils.testPhone(value2)) {
          this.setState({
            hasError: true,
          });
        } else {
          this.setState({
            hasError: false,
          });
        }
        this.setState({
          phone:value,
        });
      }
    recharge=()=>{  
        var phonenum=this.state.phone.replace(/\s/g, '');
        console.log('充值手机号：',phonenum);
            if(phonenum=='' || this.state.hasError){
                Toast.info('请输入正确的手机号');
                return;
            }   
        axios.ajax({
            url:'/api/v1/customer_service/tps/rechargePhone',
            method:'post',
            data:{
                phoneNumber:phonenum,
                amount:1
            }
        }).then((res)=>{
            if(res.code===0){
                Toast.info('充值成功');
            }else if(res.code===12400){
                Toast.info('您当前活力值不足，签到可领取活力值')
            }else if(res.code===90500){
                Toast.info('充值失败');
            }
        });
    }
    toRechargeRecord=()=>{
        this.props.history.push('/rechargeRecord');
    }
    handleClick=(index)=>{  
        let arr=this.state.arr;     
        {arr.map((item,index)=>
            {                
               item.selected=0; 
               console.log(item.selected);
            }               
        )}       
        arr[index].selected = 1
        this.setState({
            arr:arr
        });
        Toast.info('多少钱：'+index);
    }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >话费充值</NavBar>
                 <Card>
                <WingBlank>
                <InputItem
                    type='phone'
                    placeholder="请输入要充值的手机号"
                    error={this.state.hasError}
                    onErrorClick={this.onErrorClick}
                    onChange={this.onChange}
                    value={this.state.phone}
                />
                <WhiteSpace size='lg'/>
                <p>充话费</p>
                <div className="div_container">                
                    {this.state.arr.map((item,index)=>                        
                        <div className={`div_list ${'div_list'+item.selected}` } key={index} onClick={()=>this.handleClick(index)}>
                            <span>{item.value}元</span>
                            <span>{item.price}成长值</span>
                        </div>
                    )}
                </div>
                <WhiteSpace size='lg'/>
                <Button type="primary" className="btn_recharge" onClick={this.recharge}>确定</Button>
                <WhiteSpace size='lg'/>
                </WingBlank>
                
                </Card>
                <a href="#" onClick={this.toRechargeRecord} style={{display: 'block',textAlign: 'center',marginTop:'40%',color:'#108ee9'}}>充值历史</a>
            </div>
        );
    }
}